<template>
  <div class="main">
    <div class="content">
      <h1 class="title">{{ data.orgName }}用电服务报告</h1>
      <div class="infoBox">
        <div class="tit">
          <img class="title-img" src="@/assets/riFill-mail-unread-fill 1@1x.png" />
          <span>基本信息</span>
        </div>
        <div class="msg">
          <div class="box">
            <div class="left">
              <p>
                户 号: <span>{{ data.customerNo }}</span>
              </p>
              <p>
                户 名: <span>{{ data.customerName }}</span>
              </p>
              <p>
                地 址: <span>{{ data.address }}</span>
              </p>
              <p>
                市场化属性: <span>{{ data.marketizationAttributeName }}</span>
              </p>
              <p>
                计费方式: <span>{{ data.declareWayName }}</span>
              </p>
              <p>
                联 系 人: <span>{{ data.contactName }}</span>
              </p>
              <p>
                电 话: <span>{{ data.contactPhone }}</span>
              </p>
              <p>
                报告月份: <span>{{ data.month }}</span>
              </p>
              <p style="font-size: 14px">
                说明: <span>本报告只限于数据采集部分</span>
              </p>
            </div>
            <div class="right">
              <div class="star">
               <i v-for="item in +data.userStarRating" :key="item" class="el-icon-star-on"></i>
              </div>
              <span style="font-size: 13px; margin-left: 15px">星级用户</span>
            </div>
          </div>
        </div>
      </div>
      <div class="infoBox">
        <div class="tit">
          <img class="title-img" src="@/assets/iconPark-excel 1@1x.png" />
          <span>本月用电概况</span>
        </div>
        <div class="msg">
          <div class="box">
            <div class="left">
              <p>
                本月 用电量:
                <span style="margin-right: 20px">{{ data.ecValueMT }}kWh</span>
                电费:
                <span style="margin-right: 20px">{{ data.totalCharge }}元</span>
                平均电价:
                <span>{{ data.avgPrice }}元/kWh</span>
              </p>
              <p>
                电度电费{{ data.degreeCharge }}元,占比{{
                  (
                    (data.degreeCharge /
                      (data.degreeCharge +
                        data.basicCharge +
                        data.adjustCharge)) *
                    100
                  ).toFixed(2)
                }}%
              </p>
              <p>
                基本电费{{ data.basicCharge }}元,占比{{
                  (
                    (data.basicCharge /
                      (data.degreeCharge +
                        data.basicCharge +
                        data.adjustCharge)) *
                    100
                  ).toFixed(2)
                }}%
              </p>
              <p>
                力调电费{{ data.adjustCharge }}元,占比{{
                  (
                    (data.adjustCharge /
                      (data.degreeCharge +
                        data.basicCharge +
                        data.adjustCharge)) *
                    100
                  ).toFixed(2)
                }}%
              </p>
              <div
                class="tiao"
                style="
                  width: 484px;
                  height: 27px;
                  display: flex;
                  margin-top: 40px;
                "
              >
                <img
                  :style="{ left: tiao + 'px' }"
                  src="@/assets/三角形 PbjUUTu@1x.png"
                />
                <div
                  class="one"
                  :style="{
                    'background-color': '#81B337',
                    width: '242px',
                    height: '100%',
                  }"
                ></div>
                <div
                  class="two"
                  :style="{
                    'background-color': '#F2BD42',
                    width: '128px',
                    height: '100%',
                  }"
                ></div>
                <div
                  class="three"
                  :style="{
                    'background-color': '#E21212',
                    width: '114px',
                    height: '100%',
                  }"
                ></div>
              </div>
              <p :style="{ 'margin-left': tiao - 20 + 'px' }">
                {{ data.avgPrice }}元/kWh
              </p>
              <p style="font-size: 14px; color: #e21212; width: 700px">
                建议:{{ data.elecUseSuggest }}
              </p>
            </div>
            <div class="right">
              <img
                id="dianfei"
                :src="data.chartCharge"
                v-if="data.chartCharge"
                style="width: 450px; height: 350px"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <div class="infoBox">
        <div class="tit">
          <img class="title-img" src="@/assets/riFill-battery-2-charge-fill 1@1x.png" />
          <span>电量情况</span>
        </div>
        <div class="msg">
          <div class="box">
            <div class="left" style="width: 588px">
              <p>
                月度用电量:<span style="margin-left: 10px">XXXXX</span
                >kWh,尖峰占比XX%
              </p>
              <table>
                <tr>
                  <td></td>
                  <td>电量（kWh）</td>
                  <td>占比%</td>
                </tr>
                <tr>
                  <td>尖</td>
                  <td>{{ data.ecValueMF1 }}</td>
                  <td>
                    {{ ((data.ecValueMF1 / data.ecValueMT) * 100).toFixed(2) }}
                  </td>
                </tr>
                <tr>
                  <td>峰</td>
                  <td>{{ data.ecValueMF2 }}</td>
                  <td>
                    {{ ((data.ecValueMF2 / data.ecValueMT) * 100).toFixed(2) }}
                  </td>
                </tr>
                <tr>
                  <td>平</td>
                  <td>{{ data.ecValueMF3 }}</td>
                  <td>
                    {{ ((data.ecValueMF3 / data.ecValueMT) * 100).toFixed(2) }}
                  </td>
                </tr>
                <tr>
                  <td>谷</td>
                  <td>{{ data.ecValueMF4 }}</td>
                  <td>
                    {{ ((data.ecValueMF4 / data.ecValueMT) * 100).toFixed(2) }}
                  </td>
                </tr>
              </table>
              <p style="font-size: 14px; color: #e21212; width: 700px">
                建议:{{ data.epowerSuggest }}
              </p>
            </div>
            <div class="right">
              <!-- <div
                id="zhanbi"
                style="width: 400px; height: 350px"
              /> -->
              <img
                :src="data.chartEpowerJfzb"
                v-if="data.chartEpowerJfzb"
                id="zhanbi"
                style="width: 300px; height: 250px"
              />
              <div class="zhanbi">尖峰占比:{{ zhanbi }}%</div>
              <div class="zbtit">
                合理范围 30%-40%
                <span v-if="zhanbi < 40" style="margin-left: 20px">正常</span>
                <span v-else style="margin-left: 20px">有待改造</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="infoBox">
        <div class="tit">
          <img class="title-img" src="@/assets/ze-description 1@1x.png" />
          <span>基本电费</span>
        </div>
        <div class="msg">
          <div class="box">
            <div class="left">
              <div class="payWay">
                <div
                  style="height: 32px; line-height: 32px; margin-right: 70px"
                >
                  缴费方式
                </div>
                <div style="display: flex">
                  <div
                    class="ar btn"
                    :class="data.declareWay == '01' ? 'active' : ''"
                  >
                    按容量缴费
                  </div>
                  <div
                    class="ax btn"
                    :class="data.declareWay == '03' ? 'active' : ''"
                  >
                    按实际需求量缴费
                  </div>
                </div>
              </div>
              <div class="max-need">
                <div style="margin-right: 70px">最大需量占比</div>
                <div class="line">
                  <div class="line-l" :style="{ width: ZDXLZB + '%' }"></div>
                  <div
                    class="line-r"
                    :style="{ width: 100 - ZDXLZB + '%' }"
                  ></div>
                  <div class="qiu" :style="{ left: ZDXLZB + '%' }"></div>
                </div>
              </div>
              <div
                style="
                  margin-left: 300px;
                  margin-top: 20px;
                  margin-bottom: 30px;
                "
              >
                {{ ZDXLZB }}%
              </div>
              <p style="font-size: 14px; color: #e21212; width: 500px">
                建议:{{ data.basicChargeSuggest }}
              </p>
            </div>
            <div class="right">
              <p style="margin-right: 100px">
                运行容量
                <span style="margin: 0 20px">{{ data.runCapacity }}</span> kVA
                <span style="margin: 0 20px 0 50px">最大需量</span
                >{{ data.maxDemand }}<span style="margin-left: 20px">kW</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="infoBox">
        <div class="tit">
          <img class="title-img" src="@/assets/iconPark-change 1@1x.png" />
          <span>力调电费</span>
        </div>
        <div class="msg">
          <div class="box">
            <div class="left">
              <div class="max-need" style="margin-top: 38px">
                <div style="margin-right: 70px">
                  功率因数<span style="color: #ff1313">{{ data.pft }}</span>
                </div>
                <div class="line">
                  <div class="line-l" :style="{ width: GLYS + '%' }"></div>
                  <div
                    class="line-r"

                  ></div>
                  <div class="qiu" :style="{left: GLYS+'%'}"></div>
                </div>
              </div>
              <div style="color: #81b337; font-size: 14px; margin-left: 400px">
                合理范围：0.90~0.99
              </div>
              <p style="font-size: 14px; color: #e21212; width: 500px">
                建议:{{ data.adjustChargeSuggest }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="infoBox">
        <div class="tit">
          <img class="title-img" src="@/assets/md-shopping_cart 1@1x.png" />
          <span>购电分析</span>
        </div>
        <div class="msg">
          <div class="box">
            <div class="left">
              <p style="margin-top: 20px">
                {{ data.purchaseAnalysisSuggest }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="infoBox">
        <div class="tit">
          <img class="title-img" src="@/assets/iconPark-smart-optimization 1@1x.png" />
          <span>绿电优化</span>
        </div>
        <div class="msg">
          <div class="box" style="border-bottom: none">
            <div class="left">
              <p style="margin-top: 20px">
                建议新建光伏容量：<span style="margin-right: 30px"
                  >{{ data.addPhotovoltaicCapacity }} kW</span
                >
                本月可消纳绿电电量：
                <span>{{ data.consumptionEpower }}</span> kWh
              </p>
              <p>
                本月节省总电费： <span>{{ data.economizeTotalCharge }} 元</span>
              </p>
              <p>
                节省基本电费：
                <span style="margin-right: 70px"
                  >{{ data.economizeBasicCharge }} 元</span
                >
                节省电度电费：
                <span>{{ data.economizeDegreeCharge }} 元</span>
              </p>
              <p>
                本月度电成本变化：从{{ data.avgPrice }}元/kWh降至{{
                  data.optimizeAvgPrice
                }}元/kWh
              </p>
            </div>
            <div class="right"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'mReportIndex',
  props: ['data'],
  data () {
    return {}
  },
  mounted () {
    // this.myChart1()
    // this.myChart2()
  },
  created () {},
  computed: {
    tiao () {
      return (this.data.avgPrice > 1.5 ? 1 : this.data.avgPrice / 1.5) * 484 - 20
    },
    zhanbi () {
      return (
        ((this.data.ecValueMF1 + this.data.ecValueMF2) / this.data.ecValueMT) *
        100
      ).toFixed(2)
    },
    ZDXLZB () {
      return ((this.data.maxDemand / this.data.runCapacity) * 100).toFixed(2)
    },
    GLYS () {
      return (this.data.pft / 1) * 100
    }
  },
  methods: {
    async handleClick () {}
    // myChart1 () {
    //   const myChart = echarts.init(document.getElementById('dianfei'))
    //   myChart.setOption({
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     series: [
    //       {
    //         type: 'pie',
    //         radius: '50%',
    //         itemStyle: {
    //           borderRadius: 10,
    //           borderColor: '#fff',
    //           borderWidth: 2
    //         },
    //         data: [
    //           {
    //             value: this.data.degreeCharge,
    //             name: `电度电费${this.data.degreeCharge}`
    //           },
    //           {
    //             value: this.data.basicCharge,
    //             name: `基本电费${this.data.basicCharge}`
    //           },
    //           {
    //             value: this.data.adjustCharge,
    //             name: `力调电费${this.data.adjustCharge}`
    //           }
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: 'rgba(0, 0, 0, 0.5)'
    //           }
    //         }
    //       }
    //     ]
    //   })
    //   const base64Image = myChart.getDataURL({
    //     type: 'png', // 图片类型，可以是'png'、'jpeg'等
    //     pixelRatio: 2, // 图片的分辨率，可以根据需要调整
    //     backgroundColor: '#fff' // 图片背景色
    //   })
    //   console.log(base64Image)
    // },
    // myChart2 () {
    //   const myChart = echarts.init(document.getElementById('zhanbi'))
    //   myChart.setOption({
    //     series: [
    //       {
    //         type: 'pie',
    //         radius: ['60%', '70%'],
    //         avoidLabelOverlap: false,
    //         emphasis: {
    //           label: {
    //             show: true,
    //             fontSize: 40,
    //             fontWeight: 'bold'
    //           }
    //         },
    //         labelLine: {
    //           show: false
    //         },
    //         data: [{ value: this.zhanbi }, { value: 100 - this.zhanbi }],
    //         color: ['#1684fc', '#e8e8e8']
    //       }
    //     ]
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: center;
  width: 100%;
  .content {
    width: 1100px;
    padding: 0px 40px 40px 40px;
    background-color: #fff;
    .title {
      text-align: center;
    }
    .infoBox {
      .tit {
        position: relative;
        font-size: 18px;
        img {
          position: absolute;
          top: 2px;
          left: -25px;
        }
      }
      .msg {
        padding: 0 15px 20px;
        .box {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #bbb;
          .left {
            p {
              margin: 10px 0;
            }
            .tiao {
              position: relative;
              img {
                position: absolute;
                top: -28px;
              }
            }
            table {
              border-collapse: collapse;
              margin-left: 100px;
              margin-bottom: 30px;
              td {
                width: 150px;
                height: 50px;
                padding-left: 10px;
                border: 1px solid #ebebeb;
              }
            }
            .payWay {
              display: flex;
              margin-top: 38px;
              font-size: 14px;
              margin-bottom: 50px;
              .btn {
                width: 140px;
                height: 32px;
                background-color: rgba(255, 255, 255, 1);
                border: 1px solid rgba(22, 132, 252, 1);
                text-align: center;
                color: #1684fc;
                line-height: 32px;
              }
              .active {
                background-color: #1684fc;
                color: #fff;
              }
            }
            .max-need {
              display: flex;
              height: 32px;
              line-height: 32px;
              .line {
                display: flex;
                position: relative;
                width: 320px;
                align-items: center;
                .line-l {
                  height: 6px;
                  background-color: #1684fc;
                  border-radius: 50px 0 0 50px;
                }
                .line-r {
                  height: 6px;
                  background-color: #e8e8e8;
                  border-radius: 0 50px 50px 0;
                }
                .qiu {
                  position: absolute;
                  width: 16px;
                  height: 16px;
                  border-radius: 50%;
                  border: 1px solid #1684fc;
                  background-color: #fff;
                }
              }
            }
          }
          .right {
            position: relative;
            .star {
              margin-top: 50px;
              margin-right: 167px;
              margin-bottom: 15px;
              .el-icon-star-on {
                font-size: 27px;
                margin-left: 10px;
                color: rgba(226, 18, 18, 1);
              }
            }
            #dianfei {
              position: absolute;
              right: 0px;
              top: -90px;
            }
            #zhanbi {
              position: absolute;
              right: 40px;
              top: 40px;
            }
            .zhanbi {
              position: absolute;
              width: 110px;
              top: 150px;
              right: 120px;
            }
            .zbtit {
              position: absolute;
              bottom: 50px;
              right: 20px;
              width: 300px;
              color: #81b337;
              font-size: 20px;
              font-weight: 500;
              span {
                color: #e21212;
              }
            }
          }
        }
      }
    }
  }
}
.title-img{
  width: 21px;
  height: 21px;
}
</style>
